<template>
    <div>
        <div class="layui-row">
            <form class="layui-form">
                <div class="layui-form-item" style="padding-top: 10px;padding-bottom: 20px">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>标题</label>
                    <div class="layui-input-inline">
                        <input type="text" required="" class="layui-input" v-model="title" style="width: 300px">
                    </div>
                </div>

                <div class="layui-form-item" style="padding-top: 10px;padding-bottom: 20px">
                    <label class="layui-form-label">详情</label>
                    <div class="layui-input-inline">
                        <textarea type="text"  class="layui-input" v-model="detail" style="width: 300px;height: 120px"></textarea>
                    </div>
                </div>

                <div class="up" style="padding-left: 15%;margin-left: 20px">
                    <h2 style="padding-bottom: 20px">可在以下区域添加附件</h2>
                    <form action='http://localhost:8011/upload' method="post" class="head-img" name="f_upload" enctype="multipart/form-data">
                        <img src="../../assets/upload.png" id="my-img" @click="clickinput()" style="cursor: pointer;border-radius: 10px;height: 30px;width: 100px;float: left">
                        <input type="file" id="img-upload" @change="getFile($event)"/>
                        <button @click="submitForm($event)" class="layui-btn" style="float: right">{{btnText}}</button>
                    </form>
                </div>
                <div  style="padding: 60px;text-align: center;margin-left: 76px;">
                    <button class="layui-btn" @click="submitForms()" style="width: 210px;margin-left: 20px;font-size: 20px">提交</button>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
    import { mapActions, mapState } from "vuex";
    import service from "../../../src/service";
    export default {
        data(){
            return{
                title:"",
                detail:"",
                file:"",
                btnText:'点击上传'
            }
        },
        methods:{
            getFile(event) {
                this.file = event.target.files[0];
                console.log(this.file);
            },
            submitForm(event) {
                event.preventDefault();
                let formData = new FormData();
                formData.append('file', this.file);
                if(this.file){
                    this.btnText = "上传中，请稍候...";
                    service.instance().postBinary("http://"+window.location.hostname+":8011/upload", formData,
                        // {
                        //     onUploadProgress(progress) {
                        //         this.upbuttontext = progress.loaded / progress.total * 100 + "%";
                        //     }
                        // }
                    ).then((response) => {
                        if (response.status === 200 && response.data === "上传成功") {
                            this.btnText = "上传成功，可提交";
                        }
                    })
                }
                else{
                    this.$layer.alert("请先点击左侧图标选择文件");
                }
            },

            submitForms(){
                var price = {
                    "title":this.title,
                    "detail":this.detail,
                    "file":this.file.name
                };
                service.instance().post("http://"+window.location.hostname+":8011/price/add",price)
                    .then((response)=> {
                        if(response.data == "1"){
                            this.getprice();
                            this.$layer.alert("添加成功");
                            parent.closeAll()
                        }
                    })
            },
            ...mapActions(["getprice"]),
            clickinput(){
                $('#img-upload').click();
            },
            uplodefile(){

            }
        },
        computed:{

        },
        mounted() {

        }
    }
</script>

<style scoped>
    .head-img{
        text-align: center;
    }

    #img-upload{
        display: none;
    }
    .up{
        text-align: center;
        padding-bottom: 20px;
        height: 60px;
        width: 70%;
        margin-left: 20%;
    }

</style>